<template>
  <el-dialog
    title="添加、编辑补办进度"
    :visible.sync="dialogValue"
    width="739px"
    append-to-body
  >
    <el-form ref="formRef" label-position="left" :model="ruleForm" :rules="rules">
      <el-form-item label="时间：">
        <el-date-picker
          v-model="ruleForm.timeValue"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          value-formatt
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="内容：">
        <el-input v-model="ruleForm.hundingContent" clearable placeholder="请输入评价" type="textarea" :rows="5" />
      </el-form-item>
      <el-form-item label="附件：">
        <el-upload
          style="width: 130px"
          action=""
          :before-upload="beforeUpload"
        >
          <el-button type="primary" icon="el-icon-upload">上传附件</el-button>
        </el-upload>
        <div class="file-list f-r j-b a-c">
          <div v-for="(item,index) in fileList" :key="index" class="file-item f-r a-c j-b">
            <span>{{ item.fileName }}.{{ item.fileType }}</span>
            <i class="el-icon-close" @click="deleteFile(index)" />
          </div>
        </div>

      </el-form-item>
    </el-form>
    <div slot="footer" class="f-r j-e">
      <el-button @click="dialogValue = false">取消</el-button>
      <el-button type="primary" @click="onSave">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { http_assets, uploadFile } from '@/api'

export default {
  name: 'User1Add',
  data() {
    return {
      dialogValue: false,
      ruleForm: {
        id: undefined,
        assetId: '',
        hundingContent: '',
        timeValue: []
      },
      rules: {},
      fileList: []
    }
  },
  methods: {
    open(assetId, item) {
      if (item) {
        this.ruleForm = {
          id: item.id,
          assetId,
          hundingContent: item.hundingContent,
          timeValue: [item.startTime, item.endTime].filter(el => el)
        }
        this.fileList = item.file
      } else {
        this.ruleForm = {
          id: undefined,
          assetId,
          hundingContent: '',
          timeValue: []
        }
        this.fileList = []
      }
      this.dialogValue = true
    },
    beforeUpload(file) {
      uploadFile(file).then(res => {
        this.fileList.push({
          fileName: res.fileName,
          fileType: res.suffix,
          fileUrl: res.imgUrl
        })
      })
      return false
    },
    deleteFile(index) {
      this.fileList.splice(index, 1)
    },
    onSave() {
      http_assets[this.ruleForm.id ? 'item_update' : 'item_create']({
        id: this.ruleForm.id,
        assetId: this.ruleForm.assetId,
        hundingContent: this.ruleForm.hundingContent,
        startTime: this.ruleForm.timeValue.length ? this.ruleForm.timeValue[0] : '',
        endTime: this.ruleForm.timeValue.length > 1 ? this.ruleForm.timeValue[1] : '',
        file: JSON.stringify(this.fileList)
      }).then(res => {
        this.dialogValue = false
        this.$emit('get-page')
      })
    }
  }
}
</script>

<style lang="scss">
.file-list {
  .file-item {
    width: 45%;
    position: relative;
    padding: 8px 20px;
    background: #EEEEEE;
    border-radius: 5px;
    color: #333333;
    font-size: 16px;
    line-height: 18px;
    margin: 15px 0;
    i {
      color: #333333;
      font-size: 16px;
    }
  }
}
</style>
